// GLOBAL ―――――――――――――――――――――――――

@import url('https://fonts.googleapis.com/css?family=Jaldi&display=swap');

body {
	display: flex;
	height: 100vh;
	margin: 0;
	background:	#3d3d44;
	font-family: 'Jaldi', sans-serif;
	font-size: 14px;
	color: white;
}

#wrapper {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

p {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#info {
	opacity: 0.2;
	margin: 0;
	text-align: center;
}


// VARIABLES (Have fun) ―――――――――――――――――――――――――

$TM-mainTint: #3d3d44;
$TM-backgroundColor: darken($TM-mainTint, 2%);
$TM-borderSize: 9px;
$TM-borderColor: darken($TM-mainTint, 8%);
$TM-width: 25px;
$TM-height: 240px;
$TM-bulbSize: $TM-width * 2;
$TM-radius: 20px;
$TM-graduationsStyle: 2px solid rgba(0, 0, 0, 0.5);
$TM-bulbColor: #3dcadf;
$TM-mercuryColor : linear-gradient(#f17a65, $TM-bulbColor) no-repeat bottom;

// Tooltip

$TM-tooltipColor: rgba(0, 0, 0, 0.7);
$TM-tooltipSize: 1em;
$TM-tooltipRadius: 5px;
$TM-tooltipTopShift: 5px;
$TM-tooltipVerticalPadding: 5px;
$TM-tooltipHorizontalPadding: $TM-tooltipVerticalPadding * 2;
$TM-tooltipLeftShift: 100%;
$TM-tooltipArrowWidth: 1.5; // Higher numbers produce smaller width
$TM-tooltipArrowHeight: 2.2; // Higher numbers produce smaller height

@mixin border() { border: $TM-borderSize solid $TM-borderColor; }


// THERMOMETER ―――――――――――――――――――――――――

#thermometer {
	width: $TM-width;
	background: $TM-backgroundColor;
	height: $TM-height;
	position: relative;
	@include border;
	border-radius: $TM-radius;
	z-index: 1;
	margin-bottom: $TM-bulbSize;

	&:before, &:after {
		position: absolute;
		content: "";
		border-radius: 50%;
	}

	// Border cover

	&:before {
		width: 100%;
		height: $TM-bulbSize / 2 + $TM-borderSize;
		bottom: $TM-borderSize;
		background: $TM-backgroundColor;
		z-index: -1;
	}

	// Bulb

	&:after {
		transform: translateX(-50%);
		width: $TM-bulbSize;
		height: $TM-bulbSize;
		background-color: $TM-bulbColor;
		bottom: -$TM-bulbSize + $TM-borderSize;
		@include border;
		z-index: -3;
		left: 50%;
	}

	#graduations {
		height: 59%;
		top: 20%;
		width: 50%;

		&, &:before {
			position: absolute;
			border-top: $TM-graduationsStyle;
			border-bottom: $TM-graduationsStyle;
		}

		&:before {
			content: "";
			height: 34%;
			width: 100%;
			top: 32%;
		}
	}

	#temperature {
		bottom: 0;
		background: $TM-mercuryColor;
		width: 100%;
		border-radius: $TM-radius;
		background-size: 100% $TM-height;
		transition: all 0.2s ease-in-out;

		&, &:before, &:after {
			position: absolute;
		}

		// Temperature value - Tooltip

		&:before {
			content: attr(data-value);
			background: $TM-tooltipColor;
			color: white;
			z-index: 2;
			padding: $TM-tooltipVerticalPadding $TM-tooltipHorizontalPadding;
			border-radius: $TM-tooltipRadius;
			font-size: $TM-tooltipSize;
			line-height: 1;
			transform: translateY(50%);
			left: calc(#{$TM-tooltipLeftShift} + 1em / #{$TM-tooltipArrowWidth});
			top: calc(-1em + #{$TM-tooltipTopShift} - #{$TM-tooltipVerticalPadding} * 2);
		}

		// Tooltip arrow

		&:after {
			content: "";
			border-top: $TM-tooltipSize / $TM-tooltipArrowHeight solid transparent;
  		border-bottom: $TM-tooltipSize / $TM-tooltipArrowHeight solid transparent;
			border-right: $TM-tooltipSize / $TM-tooltipArrowWidth solid $TM-tooltipColor;
			left: $TM-tooltipLeftShift;
			top: calc(-#{$TM-tooltipSize} / #{$TM-tooltipArrowHeight} + #{$TM-tooltipTopShift});
		}
	}
}


// PLAYGROUND ―――――――――――――――――――――――――

#playground {
	font-size: 1.1em;

	#range {
		display: flex;

		input[type="text"] {
			width: 2em;
			background: transparent;
			border: none;
			color: inherit;
			font: inherit;
			margin: 0 5px;
			padding: 0px 5px;
			border-bottom: 2px solid transparent;
			transition: all 0.2s ease-in-out;

			&:focus {
				border-color: $TM-bulbColor;
				outline: none;
			}

			&:first-child {text-align: right; }
		}
	}

	#unit {
		width: 100%;
		margin: 0;
		text-align: center;

		&:hover { cursor: pointer; }
	}
}


// RANGE ―――――――――――――――――――――――――
// https://github.com/darlanrod/input-range-scss

$track-color: $TM-borderColor !default;
$thumb-color: $TM-bulbColor !default;

$thumb-radius: 12px !default;
$thumb-height: 11px !default;
$thumb-width: 18px !default;
$thumb-shadow-size: 4px !default;
$thumb-shadow-blur: 4px !default;
$thumb-shadow-color: transparent !default;
$thumb-border-width: 0px !default;
$thumb-border-color: $TM-mainTint !default;

$track-width: 100% !default;
$track-height: 10px !default;
$track-shadow-size: 1px !default;
$track-shadow-blur: 1px !default;
$track-shadow-color: transparent !default;
$track-border-width: 2px !default;
$track-border-color: $track-color !default;

$track-radius: 5px !default;
$contrast: 3% !default;
$focusStyle: lighten($track-color, $contrast);

$ie-bottom-track-color: darken($track-color, $contrast) !default;

@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
}

@mixin track {
  cursor: default;
  height: $track-height;
  transition: all .2s ease;
  width: $track-width;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

@mixin thumb($adjustment: 0) {
  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
  background: $thumb-color;
  border: $thumb-border-width solid $thumb-border-color;
  border-radius: $thumb-radius;
  cursor: pointer;
  height: $thumb-height + $adjustment;
  width: $thumb-width + $adjustment;
}

@mixin disabled {
  cursor: not-allowed;
}

input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  margin: $thumb-height / 2 0;
  width: $track-width;

  &::-moz-focus-outer {
    border: 0;
  }

	&:hover {
		cursor: pointer;
	}

  &:focus {
    outline: 0;

    &::-webkit-slider-runnable-track {
      background: $focusStyle;
			border-color: $focusStyle;
    }

    &::-ms-fill-lower {
      background: $track-color;
    }

    &::-ms-fill-upper {
      background: $focusStyle;
			border-color: $focusStyle;
    }
  }

  &::-webkit-slider-runnable-track {
    @include track;
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
  }

  &::-webkit-slider-thumb {
    @include thumb;
    -webkit-appearance: none;
    margin-top: ((-$track-border-width * 2 + $track-height) / 2 - $thumb-height / 2);
  }

  &::-moz-range-track {
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    @include track;
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
    height: $track-height / 2;
  }

  &::-moz-range-thumb {
    @include thumb(-4);
  }

  &::-ms-track {
    @include track;
    background: transparent;
    border-color: transparent;
    border-width: ($thumb-height / 2) 0;
    color: transparent;
  }

  &::-ms-fill-lower {
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    background: $ie-bottom-track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: ($track-radius * 2);
  }

  &::-ms-fill-upper {
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: ($track-radius * 2);
  }

  &::-ms-thumb {
    @include thumb(-4);
    margin-top: $track-height / 4;
  }

  &:disabled {
    &::-webkit-slider-thumb {
      @include disabled;
    }

    &::-moz-range-thumb {
      @include disabled;
    }

    &::-ms-thumb {
      @include disabled;
    }

    &::-webkit-slider-runnable-track {
      @include disabled;
    }

    &::-ms-fill-lower {
      @include disabled;
    }

    &::-ms-fill-upper {
      @include disabled;
    }
  }
}
